<template>
	<view class="content">
		<view class="my_sw">
			<view class="uni-padding-wrap">
				<view class="page-section swiper">
					<view class="page-section-spacing">
						<swiper :circular="true" class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
						 :duration="duration">
							<swiper-item v-for="(item, index) in swpList" :key="item.uid">
								<image style="width: 100%;height: 100%;" class="zhuan" :src="item.url"></image>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
		</view>
		<view class="my_main">
			<view class="main_list_box">
				<view v-for="(item,index) in classNav" :key="item.id" class="main_list" @tap="handClass(index)">
					<image :src="item.image[0].url" class="main_item_img"></image>
					<view class="main_item_text">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<view class="my_join_vip">
			<view class="my_join_vip_box" @tap="handGoVip()">
				<view class="join_icon icon iconfont iconaaa ">

				</view>
				<view class="join_title">
					加入绿卡会员预计每年节省806元
				</view>
				<view class="join_go">
					5折开卡
				</view>
			</view>

		</view>
		<view class="my_countdown my_flex">
			<view class="my_icon_shu icon iconfont iconshu">

			</view>
			<view class="today">
				今日疯抢
			</view>
			<uni-countdown :show-day="false" :hour="24" :minute="minute" :second="0" :reset="reset" @timeup="timeUp">
			</uni-countdown>
		</view>

		<view class="today_rush">
			<view class="bookshelf">
				<scroll-view scroll-x="true" class="bookshelf-content">
					<view style="display: flex;" class="today_list_box">
						<view v-for="todayItem in todayList" :key="todayItem.id" class="item">
							<view class="todaya_img_box" @tap="handGoodsDateils(todayItem.id)">
								<image :src="todayItem.propaganda[0].url" class="main_item_img"></image>
							</view>
							<view class="item-title text-over-1">
								{{todayItem.name}}
							</view>
							<view class="today_price_box my_flex">
								<view class="today_price">
									¥&nbsp;{{todayItem.price}}
								</view>
								<view class="today_icon icon iconfont iconche">

								</view>
							</view>

						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="my_countdown my_flex">
			<view class="my_icon_shu icon iconfont iconshu">

			</view>
			<view class="today">
				猜你喜欢
			</view>
		</view>
		<view class="my_goods_list_box ">
			<view v-for="goods in goodsList" :key="goods.id" class="goods_item">
				<image @tap="handGoodsDateils(goods.id)" class="goods_img" :src="goods.propaganda[0].url" mode=""></image>
				<view class="goods_item_name">
					{{goods.name}}
				</view>
				<view class="goods_item_price_box">
					<view class="today_price_box my_flex">
						<view class="today_price">
							¥&nbsp;{{goods.price}}
						</view>
						<view @tap="addCart(goods.id)" class="today_icon icon iconfont iconche">

						</view>
					</view>
				</view>
			</view>


		</view>
		 <view class="loading">{{loadingText}}</view>
		 <addGoods ref="mainindex"></addGoods>
	</view>

</template>

<script>
	var _self, page = 10,
		timer = null;
	import {
		mapState
	} from 'vuex'
	import uniCountdown from '@/components/linnian-CountDown/uni-countdown.vue'
	import addGoods from '@/components/addGoods/addGoods.vue'
	export default {
		computed: mapState(['forcedLogin', 'hasLogin', 'user']),
		components: {
			uniCountdown,
			addGoods
		},
		data() {
			return {
				minute: 0,
				reset: false,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				swpList: [],
				classNav: [],
				todayList: [],
				goodsList: [],
				loadingText: '加载中...'
			}
		},
		onPullDownRefresh: function() {
			this.getGoodsList();
		},
		onReachBottom: function() {
		_self.getGoodsListPage();
		},
		methods: {
			addCart(id){
				  this.$refs.mainindex.rotateAndScale();
				  // console.log("aaa",   this.$refs.mainindex.rotateAndScale())
			},
			handGoodsDateils(id){
				uni.navigateTo({
					url:'../goodsDetails/goodsDetails?id='+id
				})
			},
			handGoVip(){
				uni.navigateTo({
					url:'../goVip/goVip'
				})
			},
			handClass(index){
				var _this = this
				uni.switchTab({
				    url: '../classify/classify',
					success:function(){
						_this.$store.commit('handClassIndex',index)
					}
				});
			},
			ceshi() {
				console.log("进来看")

			},
			timeUp() {
				console.log("到啦")
			},
			getGoodsList() {
				// page = 1;
				this.https('h5/nottoken/homeLive', 'GET', {
						current: 1,
						pageSize: page
					}) //(请求地址,请求类型,数据)
					.then(res => {
						page+=10;
						console.log("猜你喜欢", res)
						this.goodsList = res.data.data
						this.goodsList.forEach(item => {
							item.propaganda = JSON.parse(item.propaganda)
						})
						uni.hideNavigationBarLoading();
						uni.stopPullDownRefresh();
						this.loadingText = '加载更多';
						if (res.data.code == 0) {
							console.log("猜你喜欢", res)
						}
					})
					.catch(err => {

					})
			},
			getGoodsListPage() {
				if (this.loadingText != '' && this.loadingText != '加载更多') {
					return false;
				}
				this.loadingText = '加载中...';
				
				uni.showNavigationBarLoading();
				this.https('h5/nottoken/homeLive', 'GET', {
						current: 1,
						pageSize: page
					}) //(请求地址,请求类型,数据)
					.then(res => {

						console.log("猜你喜欢", page,res.data.data.length)
						this.loadingText = '';

						if (res.data.data.length < page -10) {
							
							uni.hideNavigationBarLoading();
							this.loadingText = '已加载全部';
							return false;
						}
						page+=10;
						this.goodsList = res.data.data
						this.goodsList.forEach(item => {
							item.propaganda = JSON.parse(item.propaganda)
						})
						_self.loadingText = '加载更多';
						uni.hideNavigationBarLoading();
					})
					.catch(err => {

					})
			},
		},
		onLoad() {
			//猜你喜欢
			_self = this;
			this.getGoodsList()
			//今日疯抢
			this.https('h5/nottoken/getInsane', 'GET') //(请求地址,请求类型,数据)
				.then(res => {

					this.todayList = res.data.data
					this.todayList.forEach(item => {
						item.propaganda = JSON.parse(item.propaganda)
					})
					if (res.data.code == 0) {
						console.log("今日疯抢", res)
					}
				})
				.catch(err => {

				})
			//分类导航
			this.https('h5/nottoken/getOneClass', 'GET') //(请求地址,请求类型,数据)
				.then(res => {

					this.classNav = res.data.data
					this.classNav.forEach(item => {
						item.image = JSON.parse(item.image)
					})
				})
				.catch(err => {

				})
			this.https('h5/nottoken/getSwipers', 'GET') //(请求地址,请求类型,数据)
				.then(res => {
					// var img = JSON.parse(res.data.data.swipers.carousel)
					res.data.data.swipers.forEach(item => {
						this.swpList.push({
							url: JSON.parse(item.carousel)[0].url,
							id: item.uid
						})
					})
				})
				.catch(err => {

				})
			if (!this.user.token) {
				uni.showModal({
					title: '未登录',
					content: '您未登录，需要登录后才能继续',
					/**
					 * 如果需要强制登录，不显示取消按钮
					 */
					showCancel: !this.forcedLogin,
					success: (res) => {
						if (res.confirm) {
							/**
							 * 如果需要强制登录，使用reLaunch方式
							 */
							if (this.forcedLogin) {
								uni.reLaunch({
									url: '../login/login'
								});
							} else {
								uni.navigateTo({
									url: '../login/login'
								});
							}
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.loading{text-align:center; line-height:80px;}
	.my_goods_list_box {
		margin-top: 32upx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.goods_item {
			box-shadow: 0 0 2px #eee;
			border: 1px solid #eee;
			border-radius: 5px;
			padding: 0px 20upx 0px 20upx;
			box-sizing: border-box;
			width: 350upx;
			height: 550upx;
			margin-bottom: 20upx;

			.goods_img {
				height: 340upx;
				width: 100%;
			}

			.goods_item_name {
				height: 70upx;

			}

			.today_price_box {
				// margin-top: 32upx;
				justify-content: space-between;
				padding: 40upx;

				@at-root .today_price {
					color: #f45a6c;
				}

				.today_icon {
					width: 60upx;
					height: 60upx;
					display: inline-block;
					background: #47c470;
					border-radius: 30upx;
					text-align: center;
					line-height: 60upx;
					color: #fff;
					font-size: 30upx;
				}
			}
		}
	}

	.bookshelf-content {
		white-space: normal !important;
		word-wrap: break-word !important;
		word-break: normal !important;
	}

	.bookshelf {

		// margin-top: 540upx;
		.bookshelf-content {
			.today_list_box {
				display: flex;
				align-items: center;
			}

			white-space: nowrap; // 滚动必须加的属性
			width: 100%;
			// height: 356upx;
			padding: 20upx;
			margin: 0 auto;
			display: flex;

			.item {
				width: 220upx;
				height: 356upx;

				.todaya_img_box {
					width: 220upx;
					height: 190upx;
					padding: 5px 10px 10px 10px;
					box-sizing: border-box;

					.main_item_img {
						width: 100%;
						height: 100%
					}
				}

				.item-title {
					width: 200upx;
					height: 64upx;
					overflow: hidden;
					text-overflow: ellipsis;
					padding: 0 20upx;
					box-sizing: border-box;
					font-size: 24upx;
					color: #101010;

				}

				.today_price_box {
					justify-content: space-around;
					margin-top: 12upx;

					.today_price {
						// width: 100%;
						height: 38upx;
						line-height: 38rpx;
						color: #f15c6b;
						font-size: 14px;
						text-align: center;
					}

					.today_icon {
						width: 60upx;
						height: 60upx;
						display: inline-block;
						background: #47c470;
						border-radius: 30upx;
						text-align: center;
						line-height: 60upx;
						color: #fff;
						font-size: 30upx;
					}
				}

			}
		}
	}

	.my_countdown {
		margin-top: 25upx;

		.today {
			font-size: 36upx;
			font-weight: 700;
			margin-right: 32upx;
			margin-left: 32upx;
		}

		.my_icon_shu {
			color: rgb(62, 205, 96);
			font-size: 56upx;
		}
	}

	.my_join_vip {
		width: 100%;
		height: 63px;
		background: #f8f4f5;
		padding: 10px;
		box-sizing: border-box;

		.my_join_vip_box {
			font-size: 26upx;
			background-image: -webkit-linear-gradient(left top, #3db762, #44ce61);
			border-radius: 10upx;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: space-around;
			line-height: 126upx;
			.join_icon {
				font-size: 60upx;
				color: #f9e974;
			}
		}


	}

	.my_main {
		.main_list_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			// grid-template-columns: repeat(5, 1fr);
			// grid-gap: .5rem;
			// display: grid;
			font-size: 26upx;
			flex-wrap: wrap;
			margin-top: 20upx;

			.main_list {
				margin: 0 16upx;
				margin-bottom: 32upx;

				.main_item_img {
					width: 108upx;
					height: 108upx;
				}
			}

		}
	}

	.hello {
		display: flex;
		flex: 1;
		flex-direction: column;
	}

	.my_sw .swiper {
		height: 208px !important;
	}

	.title {
		color: #8f8f94;
		margin-top: 25px;
	}

	.ul {
		font-size: 15px;
		color: #8f8f94;
		margin-top: 25px;
	}

	.ul>view {
		line-height: 25px;
	}

	.content {
		font-size: 28upx;
	}

	.my_flex {
		display: flex;
		align-items: center;
	}
</style>
